<template>
  <div class="login-bg">
    <header class="login-header">
      <div class="logo-wrap">
        <MegmeetIcon class="logo" style="width: 85% !important; height: 24px !important;"></MegmeetIcon>
      </div>
    </header>
    <img class="person-and-computer" :src="require('@/assets/img/person_and_computer.png')"/>
    <div class="login-card">
      <div class="title">智联技术平台</div>
      <el-form ref="loginFormRef" :model="loginForm" class="demo-form-inline" :rules="rules">
        <el-form-item prop="jobNo">
          <el-input v-model="loginForm.jobNo" placeholder="请输入工号" maxlength="100"/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              class="input_password"
              v-model="loginForm.password"
              type="password"
              placeholder="请输入密码"
              show-password
              @keyup.enter="handleLogin"
          />
        </el-form-item>
        <el-form-item class="remember-me" prop="rememberMe">
          <el-checkbox v-model="loginForm.rememberMe" label="记住我"/>
        </el-form-item>
        <el-form-item class="login-button-wrap">
          <el-button
              :loading="loading" type="primary" @click="handleLogin">
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import {ref, reactive, onMounted, inject, getCurrentInstance} from 'vue'
import Cookies from "js-cookie"
import {encrypt, decrypt} from '@/utils/jsencrypt'
import MegmeetIcon from "@/components/common/Megmeet.vue"
import useUserStore from "@/store/modules/user";
import router from '@/router'

const {proxy} = getCurrentInstance()
const store = useUserStore()
const loading = ref(false)
const loginFormRef = ref(null)
const reload = inject("reload")
const loginForm = reactive({
  jobNo: '',
  password: '',
  rememberMe: false
})
const rules = reactive({
  jobNo: [
    {min: 3, max: 100, message: '请输入工号', trigger: 'blur', required: true},
    {
      trigger: 'blur',
      message: '请输入正确的工号',
      validator: (_rule, value, callback) => {
        const title = /^[@a-zA-Z0-9\u4e00-\u9fe5]+$/
        if (value === "" || value == null || title.test(value)) {
          callback()
        } else if (!title.test(value)) {
          callback(new Error("只能输入中文、数字和英文"))
        }
      }
    }
  ],
  password: [
    {required: true, message: '请输入密码', trigger: 'blur'}
  ]
})
const getLoginInfo = () => {
  loginForm.jobNo = Cookies.get("jobNo") || ''
  const password = Cookies.get("password");

  loginForm.password = Cookies.get("password") && decrypt(password) || ''
  loginForm.rememberMe = !!Cookies.get('rememberMe')
}
onMounted(() => {
  getLoginInfo()
})


const handleLogin = () => {
  loginFormRef.value.validate(valid => {
    if (valid) {
      loading.value = true
      if (loginForm.rememberMe) {
        Cookies.set("jobNo", loginForm.jobNo, {expires: 30})
        Cookies.set("password", encrypt(loginForm.password), {expires: 30})
        Cookies.set('rememberMe', loginForm.rememberMe, {expires: 30})
      } else {
        Cookies.remove("jobNo")
        Cookies.remove("password")
        Cookies.remove('rememberMe')
      }
      store.loginAction(loginForm).then(() => {
        if(proxy.$route.query.redirect==='document'){
          router.replace({name: 'index'})
        }else{
          router.replace({name: proxy.$route.query.redirect || 'index'})
        }
        // router.replace({name: proxy.$route.query.redirect || 'index'})
        store.loginFlag = true
        reload()
      }).catch(() => {
        loading.value = false
        store.loginFlag = false
      })
    }
  })

}


</script>
<style scoped lang="scss">
.login-bg {
  background: url('~@/assets/img/login_bg.png') left top/100% 100% no-repeat;
  height: 100vh;
}

.login-card{
  :deep(.el-input__suffix){
    position: absolute;
    right: 6%;
  }
}

.login-header {
  position: sticky;
  top: 0;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--el-bg-color);
}

.logo-wrap {
  margin-left: 2.4rem;
  height: 24px !important;
}

.person-and-computer {
  position: absolute;
  width: 55%;
  top: 19rem;
  right: 70rem;
}

.official-website {
  width: 12rem;
  height: 100%;
  background-color: #1A9B92;
  display: flex;
  justify-content: center;
  align-items: center;
}

.official-website a {
  text-decoration: none;
  font-weight: 500;
  color: #FFFFFF;
  font-size: 1.6rem;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 42rem;
  height: 46.2rem;
  position: absolute;
  right: 17.6rem;
  top: 23rem;
  border-radius: 0.8rem;
  box-shadow: 0px 0px 1.2rem rgba(0, 0, 0, .12);
  background: #FFFFFF;
}

.login-card .el-card__body {
  height: 100%;
  padding: 0;
}

.login-card .title {
  height: 11rem;
  background: rgba(26, 155, 146, 0.19);
  font-weight: 500;
  color: #00A298;
  font-size: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 0.8rem;
  border-top-right-radius: 0.8rem;
}

.login-card .el-form {
  margin: 4.3rem 4.6rem 3.2rem 4.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: calc(100% - 18.5rem);
}

.el-form-item {
  width: 100%;
  margin-bottom: 2.8rem;
}

:deep(.el-input__wrapper) {
  box-shadow: none;
  background: #F3F3F3;
}

.el-input {
  height: 4.8rem;
}

.remember-me {
  height: 2rem;
  margin-bottom: 3rem;
}

.remember-me :deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
  color: #1A9B92;
}

.remember-me :deep(.is-checked .el-checkbox__inner) {
  background-color: #1A9B92;
  border-color: #1A9B92;
}

.el-checkbox {
  height: auto;
}

.login-button-wrap {
  height: 5.4rem;
}

.el-form-item .el-button {
  width: 100%;
  background-color: #00A298;
  border-color: #00A298;
  height: 100%;
}

.el-button--primary {
  --el-button-bg-color: #00A298;
}

.login-card{
  :deep(.el-input__inner){
    padding: 1px 11px;
    height: 4.8rem;
    border-radius: 6px !important;
  }
  :deep(.el-input__wrapper){
    padding: 0 !important;
  }
}


</style>
